<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JAR包差异分析工具</title>
    <!-- 使用本地依赖 -->
    <link href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
    <style>
        .progress {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .error-message {
            color: #dc3545;
            margin-top: 10px;
        }
        .file-input {
            margin-bottom: 15px;
        }
        .analysis-result {
            margin-top: 20px;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .loading-spinner {
            width: 3rem;
            height: 3rem;
        }
        .badge {
            font-size: 0.9em;
            padding: 0.4em 0.6em;
        }
        .api-badge {
            margin: 0.2em;
        }
    </style>
</head>
<body>
    <div id="app" class="container mt-5">
        <h1 class="text-center mb-4">JAR包差异分析工具</h1>
        
        <!-- 上传卡片 -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">上传JAR文件</h5>
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">旧版本JAR包</h5>
                                <div class="input-group">
                                    <input type="file" class="form-control" id="oldJarFile" @change="handleOldJarUpload" accept=".jar">
                                    <button class="btn btn-outline-secondary" type="button" @click="clearOldJarFile">
                                        清空
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">新版本JAR包</h5>
                                <div class="input-group">
                                    <input type="file" class="form-control" id="newJarFile" @change="handleNewJarUpload" accept=".jar">
                                    <button class="btn btn-outline-secondary" type="button" @click="clearNewJarFile">
                                        清空
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="oldJar" class="file-info mt-1">
                    已选择旧版本文件：{{ oldJar.name }} ({{ formatFileSize(oldJar.size) }})
                </div>
                <div v-if="newJar" class="file-info mt-1">
                    已选择新版本文件：{{ newJar.name }} ({{ formatFileSize(newJar.size) }})
                </div>
                <!-- 上传进度条 -->
                <div v-if="uploadProgress > 0" class="progress">
                    <div class="progress-bar" role="progressbar" 
                         :style="{ width: uploadProgress + '%' }" 
                         :aria-valuenow="uploadProgress" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                        {{uploadProgress}}%
                    </div>
                </div>
                <button class="btn btn-primary mt-3" @click="analyze" :disabled="!canAnalyze || loading">
                    <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
                    开始分析
                </button>
            </div>
        </div>

        <!-- 错误信息 -->
        <div v-if="error" class="alert alert-danger">
            {{ error }}
        </div>

        <!-- 分析结果 -->
        <div v-if="analysisResult && analysisResult.success && analysisResult.result" class="mt-4">
            <!-- 摘要卡片 -->
            <div class="card summary-card mb-4">
                <div class="card-body">
                    <h5 class="card-title">分析摘要</h5>
                    <div class="row">
                        <div class="col-md-3">
                            <strong>旧版本：</strong> {{ analysisResult.result.oldVersion || 'Unknown' }}
                        </div>
                        <div class="col-md-3">
                            <strong>新版本：</strong> {{ analysisResult.result.newVersion || 'Unknown' }}
                        </div>
                        <div class="col-md-3">
                            <strong>变更总数：</strong> {{ analysisResult.result.classDifferences.length }}
                        </div>
                        <div class="col-md-3">
                            <strong>分析耗时：</strong> {{ analysisResult.result.analysisTime || 0 }}毫秒
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <strong>总类数：</strong> {{ analysisResult.result.totalClasses || 0 }}
                        </div>
                        <div class="col-md-3">
                            <strong>修改类数：</strong> {{ analysisResult.result.modifiedClasses || 0 }}
                        </div>
                        <div class="col-md-3">
                            <strong>新增类数：</strong> {{ analysisResult.result.addedClasses || 0 }}
                        </div>
                        <div class="col-md-3">
                            <strong>删除类数：</strong> {{ analysisResult.result.deletedClasses || 0 }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 导出按钮 -->
            <div class="export-buttons mb-4">
                <button class="btn btn-success me-2" @click="exportExcel" :disabled="exporting">
                    <span v-if="exporting" class="spinner-border spinner-border-sm me-2"></span>
                    导出Excel
                </button>
                <button class="btn btn-danger" @click="exportPdf" :disabled="exporting">
                    <span v-if="exporting" class="spinner-border spinner-border-sm me-2"></span>
                    导出PDF
                </button>
            </div>

            <!-- 结果表格 -->
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>类名</th>
                            <th>变更类型</th>
                            <th>方法变更</th>
                            <th>API影响</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="diff in analysisResult.result.classDifferences" :key="diff.className">
                            <td>{{ diff.className }}</td>
                            <td>
                                <span :class="{
                                    'badge bg-success': diff.type === 'ADDED',
                                    'badge bg-warning': diff.type === 'MODIFIED',
                                    'badge bg-danger': diff.type === 'DELETED',
                                    'badge bg-secondary': !diff.type
                                }">
                                    {{ getChangeTypeText(diff.type) }}
                                </span>
                            </td>
                            <td>{{ diff.methodDifferences.length }} 处变更</td>
                            <td>
                                <div v-if="diff.affectedApis && diff.affectedApis.length > 0" 
                                     class="d-flex flex-wrap gap-1">
                                    <span v-for="api in diff.affectedApis" 
                                          :key="api"
                                          class="badge bg-warning text-dark api-badge">
                                        {{ api }}
                                    </span>
                                </div>
                                <div v-else-if="diff.dependentApiMethods && diff.dependentApiMethods.length > 0" 
                                     class="d-flex flex-wrap gap-1">
                                    <span v-for="apiMethod in diff.dependentApiMethods" 
                                          :key="apiMethod"
                                          class="badge bg-warning text-dark api-badge">
                                        {{ apiMethod }}
                                    </span>
                                </div>
                                <span v-else class="text-muted">无API影响</span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-info text-white" @click="showDetails(diff)">
                                    查看详情
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 详情模态框 -->
        <div class="modal fade" id="detailsModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">类变更详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div v-if="selectedClass">
                            <h6>类名：{{ selectedClass.className }}</h6>
                            <div class="method-list mt-3">
                                <div v-for="method in selectedClass.methodDifferences" 
                                     :key="method.methodName"
                                     class="card mb-2">
                                    <div class="card-body">
                                        <h6 class="card-title">{{ method.methodName }}</h6>
                                        <p class="card-text">
                                            <strong>变更类型：</strong>
                                            <span :class="{
                                                'badge bg-success': method.type === 'ADDED',
                                                'badge bg-warning': method.type === 'MODIFIED',
                                                'badge bg-danger': method.type === 'DELETED',
                                                'badge bg-secondary': !method.type
                                            }">
                                                {{ getChangeTypeText(method.type) }}
                                            </span>
                                        </p>
                                        <p class="card-text" v-if="method.description">
                                            <strong>变更描述：</strong> {{ method.description }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用本地依赖 -->
    <script src="/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="/webjars/vue/2.6.14/vue.min.js"></script>
    <script src="/webjars/axios/0.21.1/dist/axios.min.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>
